import { Component, ViewChild } from '@angular/core';
import { IonInput, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonContent, IonInput],
})
export class HomePage {
  @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput;
  url: string = 'https://tv.cctv.com/live/cctv1/';
  constructor() {}

  btnGo(): void {
    
  }

  onInput(event: CustomEvent) {
    const value = (event.target as HTMLIonInputElement).value ?? '';

    // Removes non alphanumeric characters
    // const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, '');

    /**
     * Update both the state variable and
     * the component to keep them in sync.
     */
    this.ionInputEl.value = this.url = value.toString();
  }
}
